var boxBg = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#564545', '#607d8b', '#405d6b', '#9e9e9e', '#70737d', '#389fa0', '#38a05e', '#b3c981', '#76a803', '#fecf43', '#e2785f'];	//box背景色
var bodyBg = ['#F7E8ED', '#F2D9E6', '#ECC6DE', '#E0ECF5', '#DDF4DE', '#F0F1D5', '#EEDECD', '#B8E6B3', '#ABE3D8', '#E0E1F5', '#F7E8ED', '#F2D9E6', '#E0ECF5', '#DDF4DE', '#F0F1D5', '#EEDECD', '#B8E6B3', '#ABE3D8', '#DFD1F0', '#6161616'];	//body背景色


//动态创建内嵌样式
var str = '';
for (var i = 0; i < boxBg.length; i++) {
	str += `.box:nth-child(${i + 1}) div{
		background: ${boxBg[i]} url(images/${i + 1}.png) no-repeat center;
	}`
}
var style = document.createElement('style');
style.innerHTML = str;
document.head.appendChild(style);

//Math.atan2(y轴的差值, x轴的差值)	返回两点之间的线与x轴正方向之间的弧度值

var boxes = document.querySelectorAll('.box');
var rot = ['rotateX(-180deg)', 'rotateY(-180deg)', 'rotateX(180deg)', 'rotateY(180deg)'];	//0上， 1右，2下，3左   进入的方向
boxes.forEach(function (box) {
	box.onmouseenter = function (ev) {
		var dir = getDir(ev, this);

		// console.log(dir);
		this.style.transform = 'translateZ(150px)' + rot[dir];
		document.body.style.background = bodyBg[Math.floor(Math.random() * (bodyBg.length - 1))]
	};
	box.onmouseleave = function (ev) {
		this.style.transform = '';
	}
});

//获取鼠标进入方块的方向
function getDir(e, box) {	//鼠标碰到盒子的坐标点, 盒子的中心点
	var l = box.getBoundingClientRect().left;
	var t = box.getBoundingClientRect().top;

	/*
		 getBoundingClientRect()	返回元素的盒模型信息
		 {
			 width:0,
			 height:0,
			 left:0,
			 top:0,
			 right:0,
			 bottom:0,
		 }
	 */

	var w = box.offsetWidth;
	var h = box.offsetHeight;

	var x = e.clientX - l - w / 2;
	var y = e.clientY - t - h / 2;

	var deg = Math.atan2(y, x) / (Math.PI / 180);

	var d = (Math.round((deg + 180) / 90) + 3) % 4;	//0 1 2 3	//0-360

	return d;
}

var content = document.querySelector('#content');
document.onmousemove = function (ev) {
	/*
		1、鼠标往右走，旋转Y轴的正值；往左走，旋转Y轴的负值 
		2、鼠标往右上走，旋转X轴的正值；往下走，旋转X轴的负值 
		3、旋转是以可视区的中心为基准点，左右，上下都是对应的

		x轴上数值
			0	1	2	3	4	5	6	7	8		鼠标实际的
			-4	-3	-2	-1	0	1	2	3	4		想要的
		y轴上数值
			0	1	2	3	4	5	6	7	8		鼠标实际的
			4	3	2	1	0	-1	-2	-3	-4		想要的
	 */

	//上下转（围绕x轴转），取y的值运算
	var x = (0.5 - ev.clientY / window.innerHeight) * 15;

	//左右转（围绕y轴转），取x的值运算
	var y = (ev.clientX / window.innerWidth - 0.5) * 15;

	content.style.transform = 'perspective(1000px) rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
}